<template>
  <div :id="echarts" :style="getheight"></div>
</template>
<script>
export default {
  name: 'curveLine',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Object,
      default: () => []
    },
    height: {
      type: Number,
      default: 340
    },
    title: {
      type: String,
      default: ''
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      list: [],
      option: {
        color: ['#28c76f', '#7AC9FD', '#fcad7b', '#fcf67b'],
        tooltip: {
          trigger: 'axis'
        },
        grid: { top: '30px', left: '60px', right: '16px', bottom: '10%' },
        yAxis: {
          type: 'value',
          data: [],
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 129, 109, 0.1)',
              width: 1 //这里是为了突出显示加上的
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          splitArea: {
            areaStyle: {
              color: 'rgba(255,255,255,.5)'
            }
          },
          scale: true,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 129, 109, 0.1)',
              width: 0.5,
              type: 'dashed'
            }
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 129, 109, 0.1)',
              width: 1 //这里是为了突出显示加上的
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          }
        },
        series: {
          type: 'k',
          data: []
        }
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )

      this.option.xAxis.data = this.chartData.x
      this.option.series.data = this.chartData.y
      chartFactor.setOption(this.option)
    }
  }
}
</script>
